<template>
	<view>
		<view class="headers_search">
			<view class="headers_inputs u-flex">
				<view class="headers_left u-flex u-row-center" @click="goChooseCity">
					<view class="headers_left_circle"></view>
					<view class="headers_left_text u-line-1">{{nowCity}}</view>
					<u-icon color="#333333" size="12" name="arrow-down-fill"></u-icon>
				</view>
				<view class="headers_input">
					<input v-if="language=='0'" v-model.trim="nowValue" @input="changeInput" type="text"
						placeholder-style="color: #999999;font-size: 26rpx;"
						:placeholder="type == 1?'請輸入你的出發點':'請輸入你的目的地'">
					<input v-else v-model.trim="nowValue" @input="changeInput" type="text"
						placeholder-style="color: #999999;font-size: 26rpx;"
						:placeholder="type == 1?'Please enter your starting point':'Please enter your destination'">
				</view>
			</view>
		</view>

		<!-- <view class="headers_title u-flex">
			<image src="../../static/images/recommend.png" mode=""></image>
			<text>热点推荐</text>
		</view> -->

		<view class="container">
			<view class="items" v-for="(item,index) in list" :key="index" @click="chooseAddress(item)">
				<view class="item u-flex u-row-between">
					<view class="item_title u-flex u-row-between">
						<image src="../../static/image/addressList.png" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					<view class="item_distance">
						{{item.distance}}
					</view>
				</view>
				<view class="items_text">
					{{item.address}}
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import amapFile from '@/request/amap-wx.js'
	let myAmapFun = new amapFile.AMapWX({
		key: '0448b76ff3028ffd56b37dfa8fd735d3', //自己的  需要替换
	});
	import {
		selectAddress,
		getDistances
	} from '../../request/api.js'
	export default {
		data() {
			return {
				list: [],
				timer: null,
				nowValue: '',
				type: ''
			};
		},
		computed: {
			nowCity() {
				return this.$store.state.address.city
			},
			startAddress() {
				return this.$store.state.address.startAddress
			},
			language(){
				return this.$store.state.user.language
			}
		},
		onLoad(e) { //type 1 开始 2结束
			this.type = e.type
			uni.setNavigationBarTitle({
				title:this.language=='0' ?'選擇地址':"select address"
			});
		},
		methods: {
			goChooseCity() {
				uni.navigateTo({
					url: '/pages/chooseAddress/chooseCity?type=1'
				})
			},
			chooseAddress(e) {
				console.log(e);
				let address = {
					latitude: e.latitude,
					longitude: e.longitude,
					addressName: e.name,
					address: e.address
				}
				if (this.type == 1) {
					this.$store.commit("address/CHANGE_START_ADDRESS", address)
				} else {
					this.$store.commit("address/CHANGE_END_ADDRESS", address)
				}
				uni.navigateBack({
					delta: 1
				})
			},
			async getList(value) {
				var _this = this;
				let res = await selectAddress({
					query: value,
					radius: 20000,
					location: this.startAddress.latitude + ',' + this.startAddress.longitude,
					language:this.language
				});
				this.list = res.results; // 储存搜索结果数组
				console.log(this.list);
				this.list = this.list.map((item) => {
					let {
						lat,
						lng
					} = item.geometry.location;
					return {
						name: item.name,
						address: item.formatted_address.slice(0, item.formatted_address.lastIndexOf("邮")),
						latitude: lat,
						longitude: lng,
						distance: getDistances(this.startAddress.latitude, this.startAddress.longitude, lat,
							lng)
					}
				})
				// myAmapFun.getInputtips({
				// 	keywords: value, // 搜索输入的关键字
				// 	city: this.nowCity, //必须填写搜索的城市
				// 	success(data) {
				// 		console.log(data);
				// 		if (data && data.tips) {
				// 			const arr = JSON.parse(JSON.stringify(data.tips))
				// 			_this.list = arr; // 储存搜索结果数组
				// 			console.log(arr);
				// 			_this.list=_this.list.map((item)=>{
				// 				let [lon,lat]=item.location.split(",");
				// 				return {
				// 					name:item.name,
				// 					address:item.address,
				// 					latitude:lat,
				// 					longitude:lon,
				// 					distance:getDistances(_this.startAddress.latitude,_this.startAddress.longitude,lat,lon)
				// 				}
				// 			})
				// 		}
				// 	},
				// });
			},
			changeInput(e) {
				clearInterval(this.timer)
				if (!e.detail.value) {
					this.list = [];
					return
				}
				this.timer = setInterval(() => {
					clearInterval(this.timer)
					this.getList(e.detail.value)
				}, 500)

			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 702rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		margin: 0 auto;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(204, 204, 204, 0.3);
		border-radius: 20rpx;

		.items {
			box-sizing: border-box;
			padding: 24rpx 0;
			border-bottom: 1rpx solid rgba(42, 49, 67, 0.1);

			.items_text {
				color: #666666;
				font-size: 26rpx;
				box-sizing: border-box;
				margin-top: 5rpx;
				padding-left: 36rpx;
			}

			.item_distance {
				font-weight: 800;
				color: #999999;
				font-size: 24rpx;
				flex-shrink: 0;
				margin-left: 20rpx;
			}

			.item_title {
				font-weight: 800;
				color: #333333;
				font-size: 30rpx;

				image {
					width: 24rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.headers_title {
		height: 90rpx;
		box-sizing: border-box;
		padding: 0 24rpx;
		font-weight: 800;
		color: #333333;
		font-size: 30rpx;

		image {
			width: 28rpx;
			height: 30rpx;
			margin-right: 10rpx;
		}
	}

	.headers_search {
		width: 750rpx;
		height: 118rpx;
		background: #FFFFFF;
		padding-top: 24rpx;
		box-sizing: border-box;

		.headers_inputs {
			width: 702rpx;
			height: 70rpx;
			background: #F5F5F5;
			border-radius: 15rpx;
			margin: 0 auto;
			box-sizing: border-box;
			padding: 0 12rpx;
		}

		.headers_input {
			width: 100%;
			box-sizing: border-box;
			padding: 0 24rpx;

			input {
				width: 100%;
				color: #333;
				font-size: 26rpx;
			}
		}

		.headers_left {
			width: 162rpx;
			position: relative;
			flex-shrink: 0;

			.headers_left_circle {
				flex-shrink: 0;
				width: 16rpx;
				height: 16rpx;
				background: #5ECF75;
				border-radius: 50%;
				margin-right: 12rpx;
			}

			.headers_left_text {
				font-weight: 800;
				color: #333333;
				font-size: 30rpx;
				margin-right: 12rpx;
			}
		}

		.headers_left::before {
			content: '';
			width: 1rpx;
			height: 50rpx;
			background: rgba(42, 49, 67, 0.1);
			position: absolute;
			top: 50%;
			transform: translateY(-50%);
			right: 0;
		}
	}
</style>